<template>
	<view class="page">
		<view class="page__month">
			<view class="">月度选择：</view>
			<view class="" style="border-bottom: 1rpx solid #007AFF;" @click="dateVisible = true">{{compMonth}}</view>
		</view>
		<view class="page__header">
			<view class="page__header--left" style="margin-bottom: 20rpx;">
				<view class="">最近运行</view>
				<view class="" style="text-align: right;font-size: 40rpx;font-weight: bold;">
					{{lastTime}}
				</view>
			</view>
			<view class="page__header--right">
				<view class="">本月累计</view>
				<view class="" style="text-align: right;font-size: 40rpx;font-weight: bold;">
					{{totalMonthTime}}
				</view>
			</view>
		</view>
		<view class="page__filter">
			<view style="margin-right: 20rpx;">按开始日期筛选：</view>
			<view style="border-bottom: 1rpx solid #007AFF;" @click="dayVisible = true">{{day}}</view>
		</view>
		<view class="page__body">
			<view class="page__body--list" v-for="item in list">
				<view class="">持续时间：{{item.DuringMinutes}}分钟</view>
				<view class="">开始时间：{{item.StartTime}}</view>
				<view class="">结束时间：{{item.CloseTime}}</view>
			</view>
			<no-data v-if="!list.length"></no-data>
		</view>
		 <u-datetime-picker
				:show="dateVisible"
				v-model="month"
				mode="year-month"
				@cancel="dateVisible = false"
				@confirm="confirmDate"
		></u-datetime-picker>
		
		<!-- 日期筛选弹窗 -->
		<pop-box>
			<u-popup :show="dayVisible" mode="bottom"  @close="dayVisible = false" @open="dayVisible = true">
				<view class="day-pop">
					<view class="day-pop__list" v-for="item in days" @click="changeDay(item)">
						<view class="day-pop__list--hover" style="height: 100%;" hover-class="clickable">{{item}}</view>
					</view>
				</view>
			</u-popup>
		</pop-box>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import moment from 'moment'
	import {formatTime} from '@/common/custom_util.js'
	import NoData from '@/components/custom/no-data/no-data.vue'
	import PopBox from '@/components/custom/pop-box/index.vue'
	
	export default {
		components: {
			NoData,
			PopBox
		},
		data() {
			return {
				device: {},
				month: moment().format('YYYY-MM'),
				lastTime: '',
				totalMonthTime: '',
				list: [],
				data: [],
				dateVisible: false,
				dayVisible: false,
				days: [],
				day: '全部'
			}
		},
		onLoad(options) {
			this.device = JSON.parse(options.data);
			this.getDeviceStartCloseInfo();
		},
		computed: {
			compMonth() {
				return moment(this.month).format('YYYY-MM')
			}
		},
		methods: {
			/**
			 * 获取设备运行数据
			 */
			getDeviceStartCloseInfo() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDeviceStartCloseInfo',
					apiparam: {
						cnlcode: this.device.aname + 'YX',
						month: moment(this.month).format('YYYY-MM')
					},
					success(res) {
						that.list = res;
						that.data = res;
						if(!res.length) {
							that.totalMonthTime = '';
							that.lastTime = '';
							that.days = [];
							return
						}
						let days = ['全部'];
						res.forEach(item => {
							let flag = false;
							days.forEach(v => {
								if(v == moment(item.StartTime).format('YYYY-MM-DD')) {
									flag = true;
								}
							})
							if(!flag) {
								days.push(moment(item.StartTime).format('YYYY-MM-DD'))
							}
						})
						that.days = days;
						let total = 0;
						res.forEach(item => {
							total += item.DuringMinutes*1;
						})
						that.totalMonthTime = formatTime(total);
						that.lastTime = formatTime(res[0].DuringMinutes);
					},
				})
			},
			/**
			 * 时间选择确认
			 */
			confirmDate(e) {
				this.month = e.value
				this.getDeviceStartCloseInfo();
				this.dateVisible = false;
			},
			/**
			 * 切换日期
			 */
			changeDay(v) {
				this.day = v;
				if(v == '全部') {
					this.list = this.data;
					this.dayVisible = false;
					return
				}
				this.list = this.data.filter(item => {
					return v == moment(item.StartTime).format('YYYY-MM-DD')
				})
				this.dayVisible = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		
		&__month {
			height: 100rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			padding-left: 20rpx;
		}
		
		&__header {
			height: 300rpx;
			margin: 0 20rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			
			&--left,&--right {
				height: 50%;
				color: #fff;
				box-sizing: border-box;
				background-color: #00B26A;
				border-radius: 10rpx;
				
				view {
					height: 50%;
					padding: 0 40rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					box-sizing: border-box;
				}
			}
		}
		
		&__filter {
			height: 100rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			padding-left: 20rpx;
			margin-bottom: 20rpx;
		}
		
		&__body {
			
			&--list {
				margin-bottom: 20rpx;
				background-color: #fff;
				padding: 20rpx;
			}
		}
	}
	
	.day-pop {
		max-height: 450rpx;
		overflow-y: scroll;
		
		&__list {
			background-color: #fff;
			
			&--hover {
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}
</style>
